import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { PRIORITY_LABELS } from "@websensor/core/client";
import { EventRow } from "@/components/event-row";
import { Badge, Bar, Chip, Empty, ExtLink, Flag, HealthPill, PageHeader, Panel, Sparkline, Stat, Table, Td, TierBadge } from "@/components/ui";
import { api, type SensorRow } from "@/lib/api";
import { fmtDuration, fmtInt, fmtMs, fmtPct, fmtScore, relTime, typeLabel, untilTime, utcDateTime } from "@/lib/format";

export const dynamic = "force-dynamic";

export async function generateMetadata({ params }: { params: Promise<{ id: string }> }): Promise<Metadata> {
  const { id } = await params;
  const d = await api.source(id);
  if (!d) return { title: "Source not found" };
  return { title: `${d.source.name} — source intelligence`, description: d.source.description ?? `Sensors, quality, activity and events for ${d.source.name} (${d.source.domain}).`, alternates: { canonical: `/source/${d.source.id}` } };
}

function qualityTone(v: number): "signal" | "warn" | "hot" | undefined {
  return v >= 80 ? "signal" : v >= 60 ? undefined : v >= 40 ? "warn" : "hot";
}

/** Source intelligence page (spec §27, §48). */
export default async function SourcePage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const d = await api.source(id);
  if (!d) notFound();
  const events = await api.events({ source: d.source.id, limit: 40 });
  const src = d.source;
  const a = d.activity ?? {};
  const q = d.quality;
  const score = a.activity_score ?? 0;
  const entityId = d.entities.find((e) => e.type === "organization" || e.id.startsWith("org_"))?.id;
  const daily = [...(d.daily ?? [])].sort((x, y) => x.day.localeCompare(y.day)).slice(-30);
  const sensorsUp = d.sensors.filter((s) => s.enabled && s.health === "UP").length;
  const rawTotal = q?.raw_changes ?? d.sensors.reduce((n, s) => n + (s.raw_changes ?? 0), 0);
  const meaningfulTotal = q?.meaningful_changes ?? d.sensors.reduce((n, s) => n + (s.meaningful_changes ?? 0), 0);
  const maxType = Math.max(1, ...(d.by_type ?? []).map((t) => t.n));
  const extra = src as typeof src & { llm_enabled?: boolean; discover?: Record<string, boolean>; fallback?: Record<string, boolean>; rate_limit_per_min?: number | null; terms_reviewed_at?: string | null };
  return (
    <>
      <PageHeader
        compact
        kicker={
          <span className="flex flex-wrap items-center gap-2">
            <TierBadge tier={src.tier} />
            <span>Tier {src.tier}</span>
            <span className="text-fg-subtle">·</span>
            <Link href={`/domain/${src.domain}`} className="font-mono hover:underline">{src.domain}</Link>
            {src.country && (
              <>
                <span className="text-fg-subtle">·</span>
                <Link href={`/country/${src.country.toLowerCase()}`} className="inline-flex items-center gap-1 font-mono hover:text-fg"><Flag code={src.country} /> {src.country}</Link>
              </>
            )}
            {src.first_party === false ? <Badge kind="external" /> : <Badge kind="first-party" />}
            {src.enabled === false && <Chip tone="warn" className="font-mono">DISABLED</Chip>}
          </span>
        }
        title={src.name}
        description={src.description ?? (src.first_party === false ? `Media / aggregator source: its reports are third-party evidence and never count as first-party confirmation.` : `Official channels of ${src.name}: every sensor below is an endpoint the organization itself publishes.`)}
        actions={
          <>
            {src.categories.map((c) => <Chip key={c} href={`/category/${c}`}>{c}</Chip>)}
            {entityId && <Link href={`/entity/${entityId}`} className="rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong">Entity & timeline →</Link>}
            <Link href={`/live?q=${encodeURIComponent(src.name)}`} className="hidden rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong sm:inline-block">Live →</Link>
            <ExtLink href={src.homepage ?? `https://${src.domain}`} className="text-[12px]">Website ↗</ExtLink>
          </>
        }
      />

      <div className="panel mb-4 grid grid-cols-2 divide-x divide-y divide-line sm:grid-cols-3 lg:grid-cols-6 lg:divide-y-0">
        <Stat label="Quality score" value={q ? fmtScore(q.quality_score) : "—"} tone={q ? qualityTone(q.quality_score) : undefined} hint={q ? `${q.sensors_up ?? sensorsUp} / ${q.sensors ?? d.sensors.length} sensors up` : "not computed yet"} />
        <Stat label="Success rate" value={q ? fmtPct(q.success_rate) : "—"} tone={q && q.success_rate < 0.9 ? "warn" : undefined} hint={q?.checks_7d ? `${fmtInt(q.checks_7d)} checks · ${fmtInt(q.errors_7d)} errors · 7 d` : `${fmtInt(q?.total_runs)} checks total`} />
        <Stat label="Avg latency" value={fmtMs(q?.avg_latency_ms)} hint="across sensors" />
        <Stat label="Structured" value={q ? fmtPct(q.structured_share) : "—"} hint={q ? `${q.structured_sensors ?? 0} feeds / APIs / status` : undefined} />
        <Stat label="Usefulness" value={q ? fmtPct(q.usefulness) : "—"} hint={`${fmtInt(meaningfulTotal)} meaningful / ${fmtInt(rawTotal)} raw`} />
        <Stat label="Sensors" value={<span>{sensorsUp}<span className="text-fg-subtle"> / {d.sensors.length}</span></span>} hint={`${d.sensors.filter((s) => s.health !== "UP").length} not UP`} tone={sensorsUp < d.sensors.length ? "warn" : undefined} />
      </div>

      <div className="grid gap-4 xl:grid-cols-[1fr_320px]">
        <div className="flex min-w-0 flex-col gap-4">
          <Panel title="30 days · daily activity" action={daily.length ? <span className="text-[11px] text-fg-subtle">{daily[0]!.day} → {daily[daily.length - 1]!.day}</span> : undefined}>
            {daily.length ? (
              <div className="grid gap-4 sm:grid-cols-3">
                {(
                  [
                    { label: "Checks", key: "checks", tone: "muted" },
                    { label: "Raw changes", key: "raw_changes", tone: "info" },
                    { label: "Events", key: "events", tone: "signal" },
                  ] as const
                ).map((s) => {
                  const values = daily.map((r) => Number(r[s.key] ?? 0));
                  const sum = values.reduce((x, y) => x + y, 0);
                  return (
                    <div key={s.key} className="min-w-0">
                      <div className="flex items-baseline justify-between">
                        <span className="label">{s.label}</span>
                        <span className="font-mono text-[12px] tabular">{fmtInt(sum)}</span>
                      </div>
                      <div className="mt-1 w-full overflow-hidden">
                        <Sparkline values={values} width={300} height={40} tone={s.tone} />
                      </div>
                    </div>
                  );
                })}
              </div>
            ) : (
              <Empty>Daily counters accumulate from the first check onward — nothing recorded for the last 30 days yet.</Empty>
            )}
          </Panel>

          <Panel title={`Sensors · ${d.sensors.length}`} dense action={<span className="hidden text-[11px] text-fg-subtle sm:inline">P0 critical · P1 major · P2 specialized · P3 low urgency</span>}>
            {d.sensors.length === 0 ? (
              <Empty>No sensors yet — discovery validates feeds, sitemaps and status pages before creating sensors.</Empty>
            ) : (
              <Table head={["Sensor", "Type", "Tier", "Prio", "Status", "Health", "Polling", "Last / next", "HTTP", "Cond.", "24 h", "Snap.", "304 %", "Raw / mean.", ""]}>
                {d.sensors.map((s) => <SensorTr key={s.id} s={s} />)}
              </Table>
            )}
          </Panel>

          <Panel title="Recent events" dense action={<Link href={`/live?q=${encodeURIComponent(src.name)}`} className="text-[11px] text-fg-subtle hover:text-fg">live →</Link>}>
            {events.items.length ? events.items.map((e) => <EventRow key={e.id} ev={e} showDate />) : <Empty>No meaningful events yet for this source.</Empty>}
          </Panel>

          {d.discovery.length > 0 && (
            <Panel title={`Discovered endpoints · ${d.discovery.length}`} dense>
              <Table head={["Kind", "URL", "Evidence", "Items", "Value", "Status", "Found"]}>
                {d.discovery.map((c) => (
                  <tr key={c.url} className="hover:bg-panel-2/60">
                    <Td mono>{c.kind}</Td>
                    <Td><span className="block max-w-[28rem] truncate font-mono text-[11.5px]" title={c.url}>{c.url}</span></Td>
                    <Td className="text-fg-subtle">{c.evidence}</Td>
                    <Td mono>{c.score?.itemCount ?? "—"}</Td>
                    <Td mono>{c.score?.value !== undefined ? fmtScore((c.score.value ?? 0) * 100) : "—"}</Td>
                    <Td><Chip tone={c.status === "promoted" ? "ok" : c.status === "rejected" ? "danger" : "default"}>{c.status}</Chip></Td>
                    <Td mono className="whitespace-nowrap text-fg-subtle">{relTime(c.found_at)}</Td>
                  </tr>
                ))}
              </Table>
            </Panel>
          )}
        </div>

        <aside className="flex min-w-0 flex-col gap-4">
          <Panel title="Activity anomaly">
            <div className="flex items-baseline justify-between">
              <span className={`font-mono text-3xl font-semibold tabular ${score >= 70 ? "text-hot" : score >= 45 ? "text-high" : "text-fg"}`}>{fmtScore(score)}</span>
              <span className="label">{score >= 70 ? "ACTIVITY ANOMALY" : score >= 45 ? "ELEVATED" : "NORMAL"}</span>
            </div>
            <div className="mt-2"><Bar value={score} tone={score >= 70 ? "hot" : score >= 45 ? "high" : "signal"} /></div>
            <dl className="mt-3 grid grid-cols-2 gap-y-1 text-[12.5px]">
              <dt className="text-fg-subtle">Normal</dt><dd className="text-right font-mono tabular">{a.baseline_changes_per_day ?? 0} changes/day</dd>
              <dt className="text-fg-subtle">Current</dt><dd className="text-right font-mono tabular">{a.changes_2h ?? 0} in 2 h</dd>
              <dt className="text-fg-subtle">Events 24 h</dt><dd className="text-right font-mono tabular">{a.events_24h ?? 0}</dd>
              <dt className="text-fg-subtle">Events 14 d</dt><dd className="text-right font-mono tabular">{a.events_14d ?? 0}</dd>
              <dt className="text-fg-subtle">Silent 24 h</dt><dd className={`text-right font-mono tabular ${a.silent_24h ? "text-silent" : ""}`}>{a.silent_24h ?? 0}</dd>
              <dt className="text-fg-subtle">Breaking 24 h</dt><dd className={`text-right font-mono tabular ${a.breaking_24h ? "text-hot" : ""}`}>{a.breaking_24h ?? 0}</dd>
            </dl>
          </Panel>

          <Panel title="Events by type" dense>
            {d.by_type?.length ? (
              <ul className="divide-y divide-line">
                {d.by_type.map((t) => (
                  <li key={t.event_type} className="grid grid-cols-[8.5rem_1fr_3rem] items-center gap-2 px-3 py-1.5 text-[12.5px]">
                    <Link href={`/live?event_type=${t.event_type}&q=${encodeURIComponent(src.name)}`} className="truncate hover:underline">{typeLabel(t.event_type)}</Link>
                    <Bar value={t.n} max={maxType} tone="info" />
                    <span className="text-right font-mono text-fg-subtle tabular">{fmtInt(t.n)}</span>
                  </li>
                ))}
              </ul>
            ) : (
              <Empty>No events yet.</Empty>
            )}
          </Panel>

          <Panel title={`Entities · ${d.entities.length}`} dense>
            {d.entities.length ? (
              <ul className="divide-y divide-line">
                {d.entities.map((e) => (
                  <li key={e.id} className="flex items-center justify-between gap-2 px-3 py-1.5 text-[13px]">
                    <Link href={`/entity/${e.id}`} className="min-w-0 truncate hover:underline">{e.name}</Link>
                    <span className="whitespace-nowrap font-mono text-[11px] text-fg-subtle">{e.type.replace(/_/g, " ")} · {e.event_count} ev</span>
                  </li>
                ))}
              </ul>
            ) : (
              <Empty>No entities linked.</Empty>
            )}
          </Panel>

          <Panel title="Source policy">
            <dl className="grid grid-cols-2 gap-y-1 text-[12.5px]">
              <dt className="text-fg-subtle">Provenance</dt><dd className="text-right">{src.first_party === false ? "third-party media" : "first-party channels"}</dd>
              <dt className="text-fg-subtle">robots.txt checked</dt><dd className="text-right font-mono tabular" title={src.robots_checked_at ? utcDateTime(src.robots_checked_at) : undefined}>{src.robots_checked_at ? relTime(src.robots_checked_at) : "—"}</dd>
              <dt className="text-fg-subtle">Importance weight</dt><dd className="text-right font-mono tabular">{src.importance_weight ?? 1}</dd>
              {extra.llm_enabled !== undefined && (
                <>
                  <dt className="text-fg-subtle">LLM interpretation</dt><dd className="text-right font-mono">{extra.llm_enabled ? "on" : "off · heuristics only"}</dd>
                </>
              )}
              {extra.rate_limit_per_min ? (
                <>
                  <dt className="text-fg-subtle">Rate limit</dt><dd className="text-right font-mono tabular">{extra.rate_limit_per_min}/min</dd>
                </>
              ) : null}
              {extra.discover && Object.values(extra.discover).some(Boolean) && (
                <>
                  <dt className="text-fg-subtle">Discovery</dt><dd className="text-right font-mono">{Object.entries(extra.discover).filter(([, v]) => v).map(([k]) => k).join(" · ")}</dd>
                </>
              )}
              {extra.fallback && Object.values(extra.fallback).some(Boolean) && (
                <>
                  <dt className="text-fg-subtle">Fallback</dt><dd className="text-right font-mono">{Object.entries(extra.fallback).filter(([, v]) => v).map(([k]) => k).join(" · ")}</dd>
                </>
              )}
              <dt className="text-fg-subtle">Acquisition</dt><dd className="text-right">official feeds first</dd>
            </dl>
            {src.notes && <p className="mt-3 border-t border-line pt-2 text-[11.5px] leading-snug text-fg-muted break-words">{src.notes}</p>}
          </Panel>
        </aside>
      </div>
    </>
  );
}

function SensorTr({ s }: { s: SensorRow }) {
  const runs = s.total_runs ?? 0;
  const nm = runs ? Math.round(((s.total_not_modified ?? 0) / runs) * 100) : null;
  const prio = s.priority ?? null;
  const cond = [s.has_etag || s.etag ? "etag" : null, s.has_last_modified || s.last_modified ? "lm" : null].filter(Boolean);
  const condTitle = [s.etag ? `ETag: ${s.etag}` : null, s.last_modified ? `Last-Modified: ${s.last_modified}` : null].filter(Boolean).join("\n") || "No conditional-request validators exposed";
  return (
    <tr className="hover:bg-panel-2/60">
      <Td>
        <Link href={`/sensor/${s.id}`} className="font-medium hover:underline">{s.name}</Link>
        <div className="max-w-[16rem] truncate font-mono text-[11px] text-fg-subtle" title={s.url}>{s.url}</div>
      </Td>
      <Td mono><span className="text-fg-muted">{s.type}</span><div className="text-[10.5px] text-fg-subtle">{s.connector}</div></Td>
      <Td><TierBadge tier={s.tier} /></Td>
      <Td>{prio !== null ? <Chip tone={prio === 0 ? "hot" : prio === 1 ? "high" : "default"} className="font-mono" title={PRIORITY_LABELS[prio] ?? `Priority ${prio}`}>P{prio}</Chip> : <span className="text-fg-subtle">—</span>}</Td>
      <Td>{s.status ? <HealthPill health={s.enabled ? s.status : "DISABLED"} /> : <span className="text-fg-subtle">—</span>}</Td>
      <Td><HealthPill health={s.enabled ? s.health : "DISABLED"} /></Td>
      <Td mono className="whitespace-nowrap">
        {s.current_interval_seconds ? fmtDuration(s.current_interval_seconds) : <span className="text-fg-subtle">adaptive</span>}
        <div className="text-[10.5px] text-fg-subtle">{s.base_interval_seconds ? `base ${fmtDuration(s.base_interval_seconds)}` : "no base"}</div>
      </Td>
      <Td mono className="whitespace-nowrap text-fg-subtle">
        <div title={s.last_check_at ? utcDateTime(s.last_check_at) : undefined}>{s.last_check_at ? relTime(s.last_check_at) : "never"}</div>
        <div className="text-[10.5px]" title={s.next_check_at ? utcDateTime(s.next_check_at) : undefined}>{untilTime(s.next_check_at)}</div>
      </Td>
      <Td mono>
        {s.last_status ? <span className={s.last_status >= 500 ? "text-danger" : s.last_status >= 400 ? "text-warn" : s.last_status === 304 ? "text-fg-subtle" : ""}>{s.last_status}</span> : <span className="text-fg-subtle">—</span>}
        {s.last_error ? <div className="max-w-[10rem] truncate text-[10.5px] text-danger" title={s.last_error}>{s.last_error}</div> : null}
      </Td>
      <Td>
        <span className="flex gap-1" title={condTitle}>
          {cond.length ? cond.map((c) => <Chip key={c} tone="ok" className="font-mono">{c}</Chip>) : <span className="text-fg-subtle">—</span>}
        </span>
      </Td>
      <Td mono className="whitespace-nowrap">
        {fmtInt(s.checks_24h ?? 0)} <span className="text-fg-subtle">chk</span>
        <div className="text-[10.5px]">{s.changes_24h ?? 0} <span className="text-fg-subtle">chg</span></div>
      </Td>
      <Td mono>{fmtInt(s.snapshot_count ?? 0)}</Td>
      <Td mono>{nm !== null ? `${nm}%` : <span className="text-fg-subtle">—</span>}</Td>
      <Td mono className="whitespace-nowrap">{s.raw_changes ?? 0} / <span className="text-signal">{s.meaningful_changes ?? 0}</span></Td>
      <Td><Link href={`/sensor/${s.id}`} className="whitespace-nowrap text-[11px] text-info hover:underline">history →</Link></Td>
    </tr>
  );
}